import { defineComponent, ref,reactive } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import "./index.scss";
import {addAdmin,getToken,login} from '@/api/login.js'
import { Encrypt, Decrypt } from "@/utils/crypto.js"
import axios from "axios";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
// import { setToken } from '@/utils/cookie.js';
import Cookies from 'js-cookie'

export default defineComponent(() => {
  const store = useStore()
  const router = useRouter()
  const submitValue = reactive({
    name: "",
    password: "",
    tel: "",
    twopassword:''
  });

  const shownew = ref(0);
  //新增用户
  const addnewUser = () => {
    console.log(shownew.value);
    shownew.value = 1;
  };

  //点击确认注册新用户
  const submitnewuser = () => {
    if (submitValue.password !== submitValue.twopassword) {
      ElMessage.error("密码不一致");
      return;
    }
    if (
      submitValue.name &&
      submitValue.password &&
      submitValue.tel
    ) {
      console.log(submitValue);
      // ajax
      //   .AddNew(submitValue)
      //   .then((res) => {
      //     if (res.status === 20000) {
      //       ElMessage.success(res.ElMessage);
      //       setshownew(0);
      //     } else {
      //       ElMessage.error(res.message);
      //     }
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });
    } else {
      ElMessage.error("请补全信息");
    }
  };

  //用户登录
  const submit = () => {
    getToken({
        data: Encrypt(
          JSON.stringify({
            username: submitValue.name,
            password: submitValue.password,
          })
        ),
      })
      .then((res) => {
        if (res.status === 20000) {
          let token = res.data;
          axios.defaults.headers.common["Token"] = token;
          login({ token: token }, token)
            .then((res) => {
              console.log(res);
              if (res.status === 20000) {
                store.commit('changeUserInfo',{...res.data});
                // setToken(token);
                Cookies.set('token', token)
                router.push("/home");
              } else {
                console.log(res.message);
              }
            })
            .catch((err) => {
              console.log(err);
            });
          ElMessage.success(res.message);
        } else {
          ElMessage.error(res.message);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };

  const render = () => {
    return (
      <div className="log-big">
        <div className="login-box">
          <div className="login-first">欢迎登录:</div>
          <el-form
            // rules={rulesRule}
            model={submitValue}
            ref="FormListOne"
            id="FormListOne"
            label-width="100px"
          >
            <el-form-item label="用户名:" prop="name">
              <el-input
                v-model={submitValue.name}
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码:" prop="password">
              <el-input
                v-model={submitValue.password}
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-form>

          {shownew.value ? (
            <>
              <el-form-item label="确认密码:" prop="twopassword">
                <el-input
                  v-model={submitValue.twopassword}
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
              <el-form-item label="联系方式:" prop="password">
                <el-input
                  v-model={submitValue.tel}
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </>
          ) : ''}
          <div className="submit-box">
            {shownew.value ? (
              <>
                <el-button
                  onClick={() => {
                    shownew.value = 0;
                    submitValue.name=''
                    submitValue.password=''
                    submitValue.tel=''
                    submitValue.twopassword=''
                  }}
                  type="primary"
                >
                  取消
                </el-button>
                <el-button onClick={submitnewuser} type="primary">
                  确定
                </el-button>
              </>
            ) : (
              <>
                <el-button onClick={addnewUser} type="primary">
                  注册
                </el-button>
                <el-button htmlType="submit" onClick={submit} type="primary">
                  登录
                </el-button>
              </>
            )}
          </div>
        </div>
      </div>
    );
  };
  return render;
});
